<script setup>
import {DFT_ICONS} from "@jzl/icons";

const modelValue = defineModel()
</script>

<template>
  <div class="ele-prop-layout" v-if="modelValue">
    <el-radio-group
      v-model="modelValue.position"
      size="mini"
      class="ele-prop-type"
    >
      <el-radio-button
        label="default"
        v-tippy
        content="默认"
      >
        <JIcon :icon="DFT_ICONS.static" />
      </el-radio-button>
      <el-radio-button
        label="relative"
        v-tippy
        content="相对定位 relative"
      >
        <JIcon :icon="DFT_ICONS.relative" />
      </el-radio-button>
      <el-radio-button
        label="absolute"
        v-tippy
        content="绝对定位 absolute"
      >
        <JIcon :icon="DFT_ICONS.absolute" />
      </el-radio-button>
      <el-radio-button
        label="fixed"
        v-tippy
        content="窗口定位 fixed"
      >
        <JIcon :icon="DFT_ICONS.fixed" />
      </el-radio-button>
    </el-radio-group>

    <div class="ele-layout-p" style="height: 92px;">
      <input type="text" class="i-top" v-model="modelValue.top" placeholder="0"/>
      <input type="text" class="i-right" v-model="modelValue.right" placeholder="0" style="top: 3px;"/>
      <input type="text" class="i-bottom" v-model="modelValue.bottom" placeholder="0"/>
      <input type="text" class="i-left" v-model="modelValue.left" placeholder="0" style="top: 3px;"/>

      <el-input v-model="modelValue.zIndex">
        <template #prefix>层级：</template>
      </el-input>
    </div>
  </div>
</template>
